import DialogBox from "@/components/DialogBox";
import { useHistory } from "@/hooks/useHistory";
import DataChart from "../components/DataChart";
import ImgCard from "../components/ImgCard";
import HistoryFile from "../components/HistoryFile";
import Location from "../components/Location";
import VideoPanel from "@/components/VideoPanel";
import ConfigDetail from "@/views/iot/alarm/components/configDetail";
import { DataPreview } from "@/enums/dataPreview";
import { openWin } from "@/utils/routerUtil";
import router from "@/routers";
import HistAlarmList from "@/views/iot/alarm/components/histAlarmList";
import { JsonSchemaEmitParam } from "@/components/JsonSchemaForm/interface/jsonschema";
import VariableDialog from "@/views/iot/variable/components/basicDialog";
import { showTips } from "@/utils/util";
import { ComponentInternalInstance } from "vue";
import { addProductInfo, getPageList, getProductPageList, modInfo } from "@/api/modules/iot/variable";
import { useRoute } from "vue-router";
import { SchemaNodeKey } from "@/utils/constants";
export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const route = useRoute();
		const detailInfo = inject<any>(SchemaNodeKey.detailInfo);
		const {
			dataChartDialog,
			imgDialog,
			fileDialog,
			videoDialog,
			locationDialog,
			configAlarmDialog,
			alarmDataDialog,
			getDialogTitle,
			dictDialog
		} = useHistory();

		const state = reactive({
			sn: "",
			param: {} as JsonSchemaEmitParam
		});
		const loadData = async (param: JsonSchemaEmitParam, sn: string) => {
			state.sn = sn;
			state.param = param;
			switch (param.dataType) {
				case DataPreview.video.type:
					videoDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "实时视频");
					videoDialog.detail.devSn = sn;
					videoDialog.videoUrl = param.dataValue;
					videoDialog.visible = true;
					break;
				case DataPreview.img.type:
					imgDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "历史图片");
					imgDialog.detail.devSn = sn;
					imgDialog.dataKey = param.dataPath;
					imgDialog.visible = true;
					break;
				case DataPreview.file.type:
					fileDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "历史文件");
					fileDialog.detail.devSn = sn;
					fileDialog.dataKey = param.dataPath;
					fileDialog.visible = true;
					break;
				case DataPreview.location.type:
					locationDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "历史位置");
					locationDialog.detail.devSn = sn;
					locationDialog.dataKey = param.dataPath;
					locationDialog.detail.location = param.dataValue;
					locationDialog.visible = true;
					break;
				case DataPreview.configAlarm.type:
					configAlarmDialog.detail.devSn = sn;
					configAlarmDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "告警配置");
					configAlarmDialog.visible = true;
					break;
				case DataPreview.alarmData.type:
					alarmDataDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "告警记录");
					alarmDataDialog.dataKey = param.dataPath;
					alarmDataDialog.detail.devSn = sn;
					alarmDataDialog.visible = true;
					break;
				case DataPreview.web.type:
					openWin(param.dataValue, router);
					break;
				case DataPreview.dict.type:
					if (!route.query.id) {
						let { result } = await getPageList({
							sn: state.sn,
							key: param.dataKey,
							keys: param.dataKey,
							label: "",
							type: "",
							pageIndex: 1,
							pageSize: 1
						});
						dictDialog.detail = result.records[0];
						dictDialog.title = getDialogTitle(
							`${dictDialog.detail.devName}（${param.schemaInfo.title || param.dataKey}）`,
							"变量配置"
						);
						dictDialog.detail.devSn = sn;
					} else {
						let { result } = await getProductPageList({
							productModel: detailInfo.detail.model,
							key: param.dataKey,
							keys: param.dataKey,
							label: "",
							type: "",
							pageIndex: 1,
							pageSize: 1
						});
						dictDialog.detail = result.records[0];
						dictDialog.title = getDialogTitle(
							`${dictDialog.detail.productName}（${param.schemaInfo.title || param.dataKey}）`,
							"变量配置"
						);
					}

					dictDialog.visible = true;
					break;
				case DataPreview.historyChart.type:
				default:
					dataChartDialog.title = getDialogTitle(`${state.sn}（${param.schemaInfo.title || param.dataKey}）`, "历史数据");
					dataChartDialog.visible = true;
					dataChartDialog.detail.devSn = sn;
					dataChartDialog.dataValue = param.dataValue;
					dataChartDialog.dataKey = param.dataPath;
					break;
			}
		};
		const submitAdd = async () => {
			if (!route.query.id) {
				let res = await modInfo(dictDialog.detail);
				let ok = showTips(res.code, proxy?.$t("device_variable.tips.detail"), res.message);
				if (ok) {
					dictDialog.visible = false;
				}
			} else {
				let res = await addProductInfo(dictDialog.detail);
				let ok = showTips(res.code, proxy?.$t("device_variable.tips.detail"), res.message);
				if (ok) {
					dictDialog.visible = false;
				}
			}
		};
		expose({ loadData });
		return () => {
			return (
				<>
					<VariableDialog
						width="800px"
						devicePage
						title={dictDialog.title}
						v-model:visible={dictDialog.visible}
						detail={dictDialog.detail}
						onSubmit={() => submitAdd()}
					></VariableDialog>
					{/*变量数据趋势*/}
					<DialogBox
						class="dialog-dense"
						hideFooter
						v-model:visible={dataChartDialog.visible}
						width="75vw"
						title={dataChartDialog.title}
					>
						<DataChart
							sn={state.sn}
							dataKey={dataChartDialog.dataKey}
							dataValue={dataChartDialog.dataValue}
							class="bg-gray-100"
							height="55vh"
						/>
					</DialogBox>
					<DialogBox class="dialog-dense" hideFooter v-model:visible={imgDialog.visible} width="75vw" title={imgDialog.title}>
						{imgDialog.visible ? (
							<ImgCard dataKey={imgDialog.dataKey} sn={imgDialog.detail.devSn} class="bg-gray-100" height="75vh" />
						) : null}
					</DialogBox>
					<DialogBox
						class="dialog-dense"
						footerLabel={["关闭"]}
						v-model:visible={fileDialog.visible}
						width="75vw"
						title={fileDialog.title}
					>
						{fileDialog.visible ? (
							<HistoryFile
								sn={fileDialog.detail.devSn}
								dataKey={fileDialog.dataKey}
								class="bg-gray-100"
								style="height:75vh"
								onFileInfo={(val: string) => (fileDialog.detail.fileInfo = val)}
							/>
						) : null}
						{/* 文件信息 */}
						{fileDialog.detail.fileInfo ? <div class="ext-file-info">{fileDialog.detail.fileInfo}</div> : null}
					</DialogBox>
					{/*视频窗口*/}
					<DialogBox title={videoDialog.title} v-model:visible={videoDialog.visible} hideFooter class="dialog-dense" width="75vw">
						{videoDialog.visible ? <VideoPanel style="height:75vh" videoUrl={videoDialog.videoUrl} /> : null}
					</DialogBox>
					{/*位置信息*/}
					<DialogBox
						title={locationDialog.title}
						v-model:visible={locationDialog.visible}
						footerLabel={["关闭"]}
						class="dialog-dense"
						width="85vw"
					>
						{locationDialog.visible ? (
							<Location
								dataKey={locationDialog.dataKey}
								devSn={state.sn}
								dataInfo={locationDialog.detail}
								style="height:75vh"
								onAddress={(val: any) => (locationDialog.detail.location!.address = val.address)}
							/>
						) : null}
						<div class="address-detail">
							<div>{locationDialog.detail.location?.address}</div>
							<div class="pl-1">
								（{locationDialog.detail.location.lng},{locationDialog.detail.location.lat}）
							</div>
						</div>
					</DialogBox>
					{/*告警记录*/}
					<DialogBox
						title={alarmDataDialog.title}
						v-model:visible={alarmDataDialog.visible}
						footerLabel={["关闭"]}
						class="dialog-dense"
						width="80vw"
						style="background-color:#f0f2f5"
					>
						{alarmDataDialog.visible ? (
							<HistAlarmList fiexdTarget sn={alarmDataDialog.detail.devSn} sensorKey={alarmDataDialog.dataKey} />
						) : null}
					</DialogBox>
					{/*告警设置*/}
					<DialogBox
						title={configAlarmDialog.title}
						v-model:visible={configAlarmDialog.visible}
						footerLabel={["关闭"]}
						width="70vw"
					>
						{configAlarmDialog.visible ? (
							<ConfigDetail
								sensorKey={state.param.dataPath}
								sn={configAlarmDialog.detail.devSn}
								title={state.param.schemaInfo.title}
							/>
						) : null}
					</DialogBox>
				</>
			);
		};
	}
});
